<!-- 弹窗组件longXueJian开发所有 -->
<template>
	<view>
		<!-- 模态框 -->
		<view @tap="GetSeal" class="mask" :class="{show:model}"></view>
		<!-- 主体 -->
		<view :style="{'height':barHidth+'rpx'}" class="active" :class="{add:model}">
			<view class="title">{{title}} <text @tap="GetClose" class="close">x</text></view>
			<view class="content">
				<scroll-view v-for="item,i in DOMS" :key="i" class="VerticalNav" scroll-y scroll-with-animation
					:scroll-top="item.top" :style="{height:barHidth-104+'rpx'}">
					<view class="cu-item" v-for="(tion,index) in item.arr" :id="item.id + index" :key="index"
						@tap="Provincial_urban_areas(i,index)" :data-id="index">
						<text :class="index == item.pca?'into':''">{{tion.citys_name}}</text>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			//控制弹窗的隐藏显示
			model: {
				type: Boolean,
				default: false
			},
			//弹窗标题
			title: {
				type: String,
				default: '省-市-区'
			},
			//弹窗 窗口高度
			barHidth: {
				type: Number,
				default: 400
			},
			//点击模态框是否能关闭弹窗
			showYes: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				// 构建省市区dom数据
				DOMS: [{
						ids: 1,
						top: 0,
						id: 'label1-',
						pca: 0,
						arr: []
					},
					{
						ids: 2,
						top: 0,
						id: 'label2-',
						pca: 0,
						arr: []
					},
					{
						ids: 3,
						top: 0,
						id: 'label3-',
						pca: null,
						arr: []
					}
				],
				
				// 省市区json数据
				provinces_data: require('@/components/xl-pv-city-rg/province-json/data.json'),
			}
		},

		//初始化数据
		watch: {
			'provinces_data.data': {
				immediate: true,
				handler(val) {
					this.DOMS[0].arr = val;
					this.DOMS[1].arr = val[0].children;
					this.DOMS[2].arr = val[0].children[0].children;
				},
			},
		},

		methods: {
			// 关闭弹框回调
			GetClose() {
				this.$emit('close', false)
			},
			// 点击模态框关闭弹框
			GetSeal() {
				if (this.showYes) this.GetClose();
			},

			// 点击省市区的事件处理逻辑
			Provincial_urban_areas(i, index) {
				this.DOMS[i].pca = index;
				if (i == 0) {
					this.DOMS[1].pca = 0;
					this.DOMS[1].arr = this.provinces_data.data[index].children;
					this.DOMS[2].arr = this.provinces_data.data[index].children[i].children;
					let h = (this.barHidth - 84) / 2;
					let t = this.provinces_data.data[index].children.length * 33;
					if (t > h) {
						this.DOMS[1].top = this.DOMS[2].top = -1;
						this.$nextTick(() => {
							this.DOMS[1].top = this.DOMS[2].top = 0;
						});
					}
					this.DOMS[2].pca = null;
				} else if (i == 1) {
					this.DOMS[2].arr = this.provinces_data.data[this.DOMS[0].pca].children[index].children;
					let h = (this.barHidth - 84) / 2;
					let t = this.provinces_data.data[this.DOMS[0].pca].children[index].children.length * 33;
					if (t > h) {
						this.DOMS[2].top = -1;
						this.$nextTick(() => {
							this.DOMS[2].top = 0;
						});
					}
					this.DOMS[2].pca = null;
				} else {
					let obj = {
						province: this.provinces_data.data[this.DOMS[0].pca].citys_name,
						city: this.provinces_data.data[this.DOMS[0].pca].children[this.DOMS[1].pca].citys_name,
						region: this.provinces_data.data[this.DOMS[0].pca].children[this.DOMS[1].pca].children[this
							.DOMS[2].pca].citys_name
					}
					this.$emit("region", obj)
					this.GetClose();
				}
				this.rollOver(i, '#' + this.DOMS[i].id, index);
			},


			// 滚动处理函数
			rollOver(i, dom, index) {
				this.$nextTick(() => {
					let doc1 = uni.createSelectorQuery().in(this).select(dom + index);
					doc1.fields({
						rect: true, //是否返回节点布局位置信息{left,top,right,bottom}
						size: true, //是否返回节点尺寸信息{width，height}
						scrollOffset: true //是否返回节点滚动信息{scrollLeft,scrollTop}
					}, (res) => {
						let h = res.height * index - (((this.barHidth / 2) - 84) / 2);
						this.DOMS[i].top = h;
					}).exec()
				})
			},
		}
	}
</script>

<style scoped>
	.mask {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 999;
		opacity: 0;
		outline: 0;
		backface-visibility: hidden;
		perspective: 1000px;
		background: rgba(0, 0, 0, 0.5);
		transition: all 0.4s ease-in-out 0s;
		pointer-events: none;
	}

	.show {
		opacity: 1;
		transition-duration: 0.4s;
		-ms-transform: scale(1);
		-webkit-transform: scale(1);
		transform: scale(1);
		overflow-x: hidden;
		overflow-y: auto;
		pointer-events: auto;
	}


	.active {
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 1000;
		width: 100%;
		height: 400rpx;
		border-top-left-radius: 24rpx;
		border-top-right-radius: 24rpx;
		overflow: hidden;
		transform: translateY(100%);
		transition: .4s;
	}

	.add {
		transform: translateY(0);
	}


	.title {
		position: relative;
		text-align: center;
		background-color: #fff;
		padding: 20rpx 0;
		border-bottom: 2rpx solid #eee;
	}

	.title>.close {
		position: absolute;
		right: 16rpx;
		width: 46rpx;
		line-height: 40rpx;
		height: 46rpx;
		background: #ccc;
		border-radius: 50rpx;

	}

	.content {
		background-color: #fff;
		padding-bottom: 24rpx;
		display: flex;
		box-sizing: border-box;
		justify-content: space-between;
	}

	.VerticalNav {
		box-sizing: border-box;
	}


	.cu-item>text {
		display: inline-block;
		width: 90%;
		font-size: 28rpx;
		padding: 15rpx 0 15rpx 0rpx;
		padding-right: 0 !important;
		padding-left: 20rpx;
		color: #999;
		border-radius: 4rpx;
		text-align: center;

	}

	.into {
		color: #000 !important;
		background: #eee;
	}

	scroll-view ::-webkit-scrollbar {
		display: none;
		width: 0;
		height: 0;
		color: transparent;
	}
</style>